import React from 'react';
import Menus from './Menus';
import { observer } from 'mobx-react';
import {Router, Route,Link,hashHistory,IndexRoute, Redirect} from 'react-router';

export default class OrderHourChoose extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            serverNum:1,
            serverHour:3,
            serverPrice:sessionStorage.getItem("order_price"),
        }

    }
    componentWillMount(){
        let userid= localStorage.getItem('userid');
        if(userid==null || userid==''){
            hashHistory.push({
                pathname:"/login"
            })
        }
    }

    addServerNum(num){
       if(num<5){
           this.setState({
               serverNum:num+1,
           })
       }
    }
    cutServerNum(num){
       if(num>1){
           this.setState({
               serverNum:num-1,
           })
       }
    }
    addServerHour(hour){
       if(hour<6){
           this.setState({
               serverHour:hour+1,
           })
       }
    }
    cutServerHour(hour){
        if(hour>3){
            this.setState({
                serverHour:hour-1,
            })
        }
    }

    serverDes(){
        let serverNum=this.state.serverNum;
        let serverHour=this.state.serverHour;
        sessionStorage.setItem("serverNum",serverNum);
        sessionStorage.setItem("serverHour",serverHour);
        sessionStorage.setItem("serverAddress","北京市朝阳区");
    }
    render(){
        return(
            <div style={{height:'100%',backgroundColor:'#efeff4'}}>
                 <div className="order">
                     <div className="orders clearfloat">
                         <img src="img/order/waiter-1.png" alt=""/>
                         <div className="order-des">预约服务人员数量</div>
                         <span onClick={this.cutServerNum.bind(this,this.state.serverNum)}>－</span>
                         <input type="text" value={this.state.serverNum} onChange={this.addServerNum.bind(this,this.state.serverNum)}/>
                         <span onClick={this.addServerNum.bind(this,this.state.serverNum)}>+</span>
                         <div className="order-unit">位置</div>
                     </div>
                     <div className="orders clearfloat">
                         <img src="img/order/waiter-1.png" alt=""/>
                         <div className="order-des">预约服务时间</div>
                         <span onClick={this.cutServerHour.bind(this,this.state.serverHour)}>－</span>
                         <input type="text" value={this.state.serverHour} onChange={this.addServerHour.bind(this,this.state.serverHour)}/>
                         <span onClick={this.addServerHour.bind(this,this.state.serverHour)}>+</span>
                         <div className="order-unit">小时</div>
                     </div>
                 </div>
                 <div className="money">
                      金额：<span>{this.state.serverPrice}</span>
                 </div>
                <div className="choose-address">
                    选择地址
                </div>
                <Link to='/address'>
                    <ul className="address clearfloat">
                        <li>
                            <img src="img/order/zuobiao.png" alt=""/>
                        </li>
                        <li>
                            <span className="address-title">地址：</span>
                            <span className="address-content">{localStorage.getItem("userAddress")}</span>
                        </li>
                        <li>
                            <img src="img/order/tianxie.png" alt=""/>
                        </li>
                    </ul>
                </Link>
                <div className="choose-address">
                    选择上门服务时间
                </div>
             <Link to="/ordertime">
                    <div className="choose-time" onClick={this.serverDes.bind(this)}>
                        <img src="img/order/zuobiao1.png" alt=""/>
                    </div>
             </Link>
                <Menus/>
            </div>
        )
    }
}